<template>
    <div class="box">
        <ul>
            <li>
                <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>发起人</span>
                </div>
                <div class="right">
                    {{departMent}}
                </div>
            </li>
             <li>
                <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>隶属校区/部门</span>
                </div>
                <div class="right">
                    {{school}}
                </div>
            </li>
             <li @click="selectPart">
                <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>课程名称</span>
                </div>
                <div class="right rights">
                   {{lessonName}} <van-icon name="arrow" />
                </div>
            </li>
            
        </ul>
        <!-- 开通人员 -->
        <ul style="border-top:0.2rem solid #F7F9FA;">
            <li style="border-bottom:0.01rem solid #eee">
                 <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>删除人员</span>
                </div>
                <div @click="pushPeople" class="right">
                    <img src="img/tianjiaren@2x.png" alt="">
                </div>
            </li>
        </ul>
        <ol v-if="result.length">
            <li v-for="data in result" :key="data.id"><span>{{data.userName}}</span><img @click="delPeople(data.id)" src="img/guandiao@2x.png" alt=""></li>
        </ol>
        <div v-else>
            <van-empty description="请添加人员" />
        </div>
        <!-- 确定 -->
        <button @click="submitTo">确定</button>
        <!-- 杂七杂八 -->
        <van-popup v-model="show" position="bottom">
            <van-picker
                title="选择部门"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
                />
        </van-popup>
        <van-popup v-model="peoShow" round position="bottom" :style="{ height: '50%',width:'100%' }" >
            <div class="items">
                <van-checkbox-group v-model="result">
                    <div class="item" v-for="(data,index) in selectPeo" :key="index">
                        <van-checkbox :name="data">{{data.userName}}</van-checkbox>
                    </div>
                </van-checkbox-group>
            </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    mounted() {
        (async () => {
            let { data } = await this.get('/user/userInfoShow',{userId:localStorage.getItem('id')});
             let lesson = await this.get('/course/selectAllBusiness');
             let peopleList = await this.get('/user/searchPeopleByUserId',{userId:localStorage.getItem('id')})
            this.departMent = data.userName;
            this.school = data.userDep;
            this.peopleList = peopleList.data;

            this.lesson = lesson.data;
            let business = this.lesson.filter(item =>item.businessType == '事业部').map(item=>{return {text:item.businessName,children:[],...item}});
            let packages = this.lesson.filter(item => item.businessType == '课程包').map(item=>{return {text:item.businessName,children:[],...item}});
            let course = this.lesson.filter(item => item.businessType == '课程').map(item=>{return {text:item.businessName,...item}});

            let arr = this.pushChildren(packages,course);
            let newArr =  this.pushChildren(business,arr);
            this.columns = newArr;

        })()
    },
    data() {
        return {
            fileList:[],
            result:[],
            show:false,
            departMent:'',
            school:'',
            lesson:[],
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            lessonName:'',
            peoShow:false,
            peopleList:[],
            selectPeo:[],
            id:''
        }
    },
    methods: {
        pushChildren(father,child){
              father.forEach(item=>{
                child.forEach(value=>{
                    if(item.id == value.pid){
                        item.children.push(value)
                    }
                })
            })
            return father
        },
        delPeople(id){
            this.result = this.result.filter(item=>item.id != id)
        },
        pushPeople(){
            if(!this.lessonName){
                this.Toast('请先选择课程')
                return
            }
            this.peoShow = true;
        },
        afterRead(file){
            console.log(file);
        },
        selectPart(){
            this.show = true
        },
         onConfirm(value, index ,data) {
             this.lessonName = value[2];
             let id = '';
                console.log(this.columns);
             this.columns.forEach(item=>{
                 item.children.forEach(values=>{
                     values.children.forEach(data=>{
                         if(data.businessName == value[2]){
                            id = data.id
                         }
                     })
                 })
             })
             this.id = id;
            console.log(id);
             this.show = false;
             (async ()=>{
                let people = await this.get('/user/queryDeleteCoursePeople',{userId:localStorage.getItem('id'),courseId:id})
                this.selectPeo = people.data;
                console.log(people.data,this.peopleList);
            })()
        },
        onChange(picker, value, index) {
        
        },
        onCancel() {
            this.show = false
        },
        submitTo(){
            let obj = {
                initiator:this.departMent,
                belongingToCampus:this.school,
                courseId:this.id,
                courseName:this.lessonName,
                userIds:this.result.map(item=>item.id).join(','),
                userNames:this.result.map(item=>item.userName).join(','),
                isDelete:2,
                initiatorId:localStorage.getItem('id')
            }
            console.log(obj);
           (async () =>{
               let data = await this.get('/course/courseApprovalAddition',obj)
               if(data.code == 200){
                   this.Toast({
                        type:'success',
                        message:'提交删除课程审批成功',
                        duration:1000   
                   })
                   this.$router.back();
               }
           })()
        }
    },
}
</script>
<style lang="scss" scoped>
    .box{
        // background:#F7F9FA;
        background: white   ;
        height: 100%;
    }
    .items{
        padding: 0.2rem 0.1rem;
        .item{
            font-size: 0.3rem;
            padding: 0.2rem 0.1rem;
            border-bottom: 1px solid #eee;
        }
    }
    ol{
        padding: 0.3rem 0.2rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        li{
            width: 1.4rem;
            height: 0.5rem;
            border: 0.01rem solid #2E9EFF;
            border-radius: 0.04rem;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #2E9EFF;
            margin-right: 0.4rem;
            text-align: center;
            line-height: 0.5rem;
            position: relative;
            img{
                width: 0.23rem;
                height: 0.23rem;
                position: absolute;
                top: -0.11rem;
                right: -0.11rem;
            }
        }
    }
    ul{
        li{
            background: white;
            padding: 0.3rem 0.24rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            color: #606060;
            font-size: 0.3rem;
            border-top: 0.02rem solid  #F7F9FA;
            justify-content: space-between;
            .rights{
                display: flex;
                align-items: center;
            }
            .right{
                img{
                    display: block;
                    width: 0.44rem;
                    height: 0.44rem;
                }
            }
            .left{
                display: flex;
                align-items: center;
                color: #7E7E7E;
                img{
                    width: 0.12rem;
                    height: 0.14rem;
                }
                span{
                    margin-left: 0.1rem;
                }
            }
        }
    }
    .upload{
        padding: 0.3rem 0.24rem;
        background: white;
        box-sizing: border-box;
        font-size: 0.3rem;
        margin-top: 0.2rem;
        .video{
            margin-top: 0.3rem;
        }
        .title{
            display: flex;
            align-items: center;
            color: #7E7E7E;
            img{
                width: 0.12rem;
                height: 0.14rem;
            }
            span{
                margin-left: 0.1rem;
            }
        }
    }
    button{
        width: 7.02rem;
        height: 0.84rem;
        background: #2E9EFF;
        border: 0.01rem solid #2E9EFF;
        box-shadow: 0.01rem 0.12rem 0.12rem 0.02rem rgba(4, 111, 204, 0.07);
        border-radius: 0.08rem;
        position: fixed;
        bottom: 0.24rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.33rem;
        line-height: 0.84rem;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
    }
</style>